import React, { useState, Component } from 'react'
import axios from 'axios';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    TouchableHighlight,

} from 'react-native';
import { router } from 'expo-router'
import { Button, Icon, WhiteSpace, WingBlank } from '@ant-design/react-native'
import AsyncStorage from '@react-native-async-storage/async-storage';
export default function Cclogin() {
    let [tel, setTel] = useState('')
    let [yzm, setYzm] = useState('')
    let [cs, setCs] = useState('')
    let loges = async () => {

        if (tel.length == 11 && yzm == cs && yzm != '') {
            let { data } = await axios.get(`http://192.168.13.227:3000/yjx/showusers`, { params: { tel: tel } })
            if (data.code === 200) {
                router.push('/(tabs)/home')
                AsyncStorage.setItem('userInfo',JSON.stringify(data.data))
            } else if (data.code === 400) {
                alert('用户名或密码错误')
            }

        } else {
            alert('请输入正确的验证码')
        }
    }


    let [isshow, setIsshow] = useState(60)
    let [flag, setFlag] = useState(false)
    let getyzm = async () => {
        if (tel.length != 11) {
            alert('请输入正确的手机号')
        } else {
            let { data } = await axios.post(`http://192.168.13.227:3000/apisms/getcodes`, { tel })
            setCs(data.sms)
            setFlag(true)
            const interval = setInterval(() => {
                setIsshow(isshow--)
                if (isshow == -2) {
                    setFlag(false)
                    setIsshow(60)
                    clearInterval(interval)
                }
            }, 1000)
        }
    }

    return (
        <View style={styles.qqq}>
            <View style={styles.contai}>
                <Text style={styles.titles}>验证码登录</Text>
                {/* <View style={styles.container}> */}
                <View style={styles.item}>
                    <Text style={styles.textStyle}>手机号：</Text>
                    <TextInput
                        // ref={(ref) => (this.inputLoginName = ref)}
                        autoFocus={true}
                        underlineColorAndroid="gray"
                        placeholder="请输入手机号"
                        clearTextOnFocus={true}
                        clearButtonMode="while-editing"
                        style={{ flex: 1 }}
                        onChangeText={(input) => setTel(input)}
                    />
                </View>
                <View style={styles.item}>
                    <Text style={styles.textStyle}>验证码：</Text>
                    <TextInput
                        // ref={(ref) => (this.inputLoginPwd = ref)}
                        underlineColorAndroid="gray"
                        placeholder="请输入验证码"
                        clearTextOnFocus={true}
                        clearButtonMode="while-editing"
                        style={{ flex: 2 }}
                        onChangeText={(input) => setYzm(input)}
                    />
                    <Button type="ghost" style={[styles.but]} size="small"
                        onPress={() => {
                            getyzm()
                        }}
                    >
                        {flag ? isshow : '获取验证码'}
                    </Button>
                </View>



                <TouchableHighlight
                    style={styles.login}
                    underlayColor="transparent"
                >
                    <Text style={styles.loginText}
                        onPress={() => {
                            loges()
                        }}
                    >登录</Text>
                </TouchableHighlight>
                <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
                    <Text
                        onPress={() => {
                            router.push('/LoginModel/login')
                        }}
                    >密码登录</Text>
                    <Text
                        onPress={() => {
                            router.push('/LoginModel/MainPage')
                        }}
                    >注册</Text>
                </View>
                <Text style={styles.agreementText}>
                    登录即代表同意《用户协议》和《隐私协议》
                </Text>
                {/* </View> */}
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    qqq: {
        //   width: 400,
        height: 800,
        backgroundColor: 'white'

    },
    agreementText: {
        fontSize: 12,
        color: 'gray',
        marginTop: 10,
        textAlign: 'center',
    },
    contai: {
        backgroundColor: 'white',
        height: 1000,
        marginTop: 150
    },
    but: {
        width: 80
    },
    titles: {
        fontSize: 30,
        fontWeight: 'bold',
        color: '#99cc33',
        marginBottom: 45,
        textAlign: 'center',
    },
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    item: {
        flexDirection: 'row',
        alignItems: 'center',
        margin: 10,
    },
    textStyle: {
        fontSize: 18,
        color: 'black',
        marginRight: 10,
    },
    login: {
        height: 40,
        backgroundColor: 'green',
        margin: 20,
        justifyContent: 'center',
    },
    loginText: {
        fontSize: 20,
        alignSelf: 'center',
        color: '#FFF',
    },
});